<template>
  <div>
    <!-- 售后服务 -->
    <el-card class="sales_card">
      <template #header>
        <div class="w-full flex justify-end items-center">
          <el-button type="primary" icon="Plus" @click="openInsertDrawer"
            >新增</el-button
          >
        </div>
      </template>

      <el-table :data="tableData" style="height: calc(100vh - 13rem)">
        <el-table-column label="订单号" prop="orderCode" />
        <el-table-column label="设备编号" prop="outCode" />
        <el-table-column label="设备类型">
          <template #default="{ row }">
            {{ `${row.categoryName}_${row.typeName}` }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template #default="{ row }">
            <el-tag
              :type="
                row.status == 1
                  ? 'warning'
                  : row.status == 2
                  ? 'primary'
                  : 'success'
              "
            >
              {{
                row.status == 1
                  ? "待验证"
                  : row.status == 2
                  ? "处理中"
                  : "已解决"
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="问题描述" prop="content" show-overflow-tooltip />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleDetail(row)">
              <el-icon><InfoFilled /></el-icon> 详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <PagingQuery
        :page="page"
        :pageSize="pageSize"
        :total="total"
        @getList="getList"
        class="mt-1"
      />
    </el-card>

    <el-drawer v-model="drawer" title="详情" destroy-on-close size="50%">
      <DetailPage :detailForm="detailForm" />
    </el-drawer>

    <el-drawer v-model="insert_drawer" title="新增" destroy-on-close size="50%">
      <InsertSale @handleBack="handleBack" />
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import PagingQuery from "@/components/PagingQuery.vue";
import DetailPage from "./component/DetailPage.vue";
import InsertSale from "./component/InsertSale.vue";
import { handleApiResponse } from "@/utils/request.js";
import { GetAfterSaleList } from "../../../../wailsjs/go/api/OrderApi";

onMounted(() => {
  getList();
});

const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tableData = ref([]);
async function getList(e) {
  if (e) {
    page.value = e.page;
    pageSize.value = e.pageSize;
  }
  handleApiResponse(() =>
    GetAfterSaleList({ page: page.value, pageSize: pageSize.value })
  ).then((res) => {
    if (res.code == 0) {
      tableData.value = res.data.list || [];
    }
  });
}

// 1.详情
const drawer = ref(false);
const detailForm = ref({});
const handleDetail = (row) => {
  detailForm.value = row;
  drawer.value = true;
};

// 2.新增
const insert_drawer = ref(false);
const openInsertDrawer = () => {
  insert_drawer.value = true;
};
const handleBack = (val) => {
  if (val == 1) {
    getList();
  }
  insert_drawer.value = false;
};
</script>

<style scoped lang="scss">
.sales_card {
  :deep(.el-card__header) {
    @apply px-2 py-1;
  }
}
</style>